<template>
  <div id="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="村庄简介" name="first">
        <div class="ms">
          <el-form ref="villageForm" :model="villageForm" :rules="rules">
            <div class="detail-title">基础信息</div>
            <div class="table">
              <div class="table-at">
                <div>级别</div>
                <div>联系人</div>
                <div>联系电话</div>
                <div>数据年份</div>
                <div>部门</div>
                <div>上传人</div>
              </div>
              <div class="table-no">
                <div>
                  <el-form-item label="" prop="address">
                    <!-- <el-input v-model="villageForm.villageGrade" placeholder="请输入级别"></el-input> -->
                    <el-select v-model="villageForm.villageGrade" placeholder="请选择级别" style="width: 100%;">
                      <el-option v-for="item in villageGradeOptions" :key="item.labelValue" :label="item.dictLabel"
                        :value="item.dictValue" />
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="" prop="address">
                    <el-input v-model="villageForm.contactPerson" placeholder="请输入联系人"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="" prop="address">
                    <el-input v-model="villageForm.contactNumber" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="" prop="address">
                    <el-date-picker v-model="villageForm.year" type="year" placeholder="请选择数据年份" style="width: 100%;">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="" prop="address">
                    <el-input v-model="villageForm.deptName" placeholder="请输入部门"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="" prop="address">
                    <el-input v-model="villageForm.userName" placeholder="请输入上传人"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="table-at">
                <div style="flex: 1;text-align: center;">地址</div>
              </div>
              <div class="table-no">
                <div style="flex: 1;text-align: center;">
                  <el-form-item label="" prop="address">
                    <el-cascader ref="villageCascader" v-model="villageForm.areaAddress" :props="villageProp"
                      style="width: 100%;" />
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="detail-title">乡村简介(如有活动添加导简介内)</div>
            <el-form-item label="" prop="address">
              <el-input type="textarea" v-model="villageForm.villageIntroduce" placeholder="请输入乡村简介"
                :rows="5"></el-input>
            </el-form-item>
            <!-- <editor :min-height="300" :height="300" /> -->
            <div class="detail-title">上传图片</div>
            <el-form-item label="" prop="address">
              <imageUpload :value="villageForm.villageImage" @uploadImage="villageUploadImg" @remove="villageUploadImg"
                :limit="9" />
            </el-form-item>
          </el-form>

        </div>

      </el-tab-pane>
      <el-tab-pane label="特色美食" name="second">
        <div v-for="(item, index) in delicacyForm" :key="index">
          <div class="ms">
            <el-form ref="delicacyForm" :model="item" :rules="rules">
              <div class="detail-title">
                <span>基础信息</span>
                <i class="el-icon-delete" @click="delPart('delicacyForm',index)"></i>
              </div>
              <div class="table">
                <div class="table-at">
                  <div>场所名称</div>
                  <div>营业时间</div>
                  <div>人均消费</div>
                  <div>联系人</div>
                  <div>联系电话</div>
                  <div>地址</div>
                </div>
                <div class="table-no">
                  <div>
                    <el-form-item label="" prop="name">
                      <el-input v-model="item.name" placeholder="请输入场所名称"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="businessHours">
                      <el-input v-model="item.businessHours" placeholder="请输入营业时间"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="avgCost">
                      <el-input v-model="item.avgCost" placeholder="请输入人均消费"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactNumber">
                      <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="address">
                      <!-- <el-cascader ref="villageCascader" v-model="item.address" :props="villageProp"
                        style="width: 100%;" placeholder="请选择地址" /> -->
                      <el-input v-model="item.address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="detail-title">场所简介</div>
              <el-form-item label="" prop="address">
                <el-input type="textarea" v-model="item.intro" placeholder="请输入场所简介" :rows="5"></el-input>
              </el-form-item>
              <div class="detail-title">美食推荐</div>
              <el-form-item label="" prop="address">
                <el-table :data="item.dishes">
                  <el-table-column label="名称" align="center" prop="name" width="200">
                    <template slot-scope="scope">
                      <el-form-item label="" prop="address">
                        <el-input type="text" v-model="scope.row.name" placeholder="请输入美食名称"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="简介" align="center" prop="intro">
                    <template slot-scope="scope">
                      <el-form-item label="" prop="intro">
                        <el-input type="text" v-model="scope.row.intro" placeholder="请输入美食简介"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="图片" align="center" prop="img">
                    <template slot-scope="scope">
                      <el-form-item label="" prop="img">
                        <imageUploadMin :value="scope.row.img" :index="scope.$index" :fatherIndex="index"
                          @uploadImage="msDelicacyUploadImg" :limit="5" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" prop="img" width="80">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" @click="foodDeleteClick(scope, index)"
                        :disabled="item.dishes.length<=1"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="add-line" @click="foodClick(index)">+</div>
              </el-form-item>
              <el-form-item label="" prop="address">
                <div class="detail-title">上传图片</div>
                <imageUploadMax :value="item.img" :index="index" @uploadImage="delicacyUploadImg"
                  @remove="delicacyUploadImg" :limit="9" />
              </el-form-item>
            </el-form>
          </div>
          <div style="background:#FFFFFF;" class="add-line"
            @click="delicacyOptionClick(delicacyForm.length === (index + 1) ? 'add' : 'delete')">
            {{ delicacyForm.length === (index + 1) ? '+' : '-' }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="景点信息" name="land">
        <div v-for="(item, index) in attractionsForm" :key="index">
          <div class="ms">
            <el-form ref="attractionsForm" :model="item" :rules="rules">
              <div class="detail-title">
                <span>基础信息</span>
                <i class="el-icon-delete" @click="delPart('attractionsForm',index)"></i>
              </div>
              <div class="table">
                <div class="table-at">
                  <div>景点类型</div>
                  <div>景点名称</div>
                  <div>景点别名</div>
                  <div>门票费用</div>
                  <div>浏览时间</div>
                  <div>景点规模</div>
                </div>
                <div class="table-no">
                  <div>
                    <el-form-item label="" prop="landscapeClassify">
                      <el-select v-model="item.landscapeClassify" placeholder="请选择景点类型" style="width: 100%;">
                        <el-option v-for="item in landscapeClassifyOptions" :key="item.dictValue"
                          :label="item.dictLabel" :value="item.dictValue" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="landscapesName">
                      <el-input v-model="item.landscapesName" placeholder="请输入景点名称"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="title">
                      <el-input v-model="item.title" placeholder="请输入景点别名"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="ticketPrice">
                      <el-input v-model="item.ticketPrice" placeholder="请输入门票费用"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="visitTime">
                      <el-input v-model="item.visitTime" placeholder="请输入浏览时间"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="landscapeScale">
                      <el-select v-model="item.landscapeScale" placeholder="请选择景点规模" style="width: 100%;">
                        <el-option v-for="item in landscapeScaleOptions" :key="item.dictValue" :label="item.dictLabel"
                          :value="item.dictValue" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="table-at">
                  <div>联系人</div>
                  <div>联系电话</div>
                  <div style="flex:1;text-align:center;">地址</div>
                </div>
                <div class="table-no">
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="item.contactPerson" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </div>
                  <div style="flex:1;text-align:center;">
                    <el-form-item label="" prop="address">
                      <!-- <el-cascader ref="villageCascader" v-model="item.address" :props="villageProp"
                        style="width: 100%;" placeholder="请选择地址" /> -->
                      <el-input v-model="item.address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="detail-title">景点简介</div>
              <el-form-item label="" prop="landscapesIntroduction">
                <el-input type="textarea" v-model="item.landscapesIntroduction" placeholder="请输入场所简介"
                  :rows="5"></el-input>
              </el-form-item>
              <el-form-item label="" prop="image">
                <div class="detail-title">上传图片</div>
                <imageUploadMax :value="item.image" :index="index" @uploadImage="landsUploadImg" :limit="9" />
              </el-form-item>
            </el-form>
          </div>
          <div style="background:#FFFFFF;" class="add-line"
            @click="landsClick(attractionsForm.length === (index + 1) ? 'add' : 'delete')">
            {{ attractionsForm.length === (index + 1) ? '+' : '-' }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="土特产" name="fourth">
        <div v-for="(item, index) in productForm" :key="index">
          <div class="ms">
            <el-form ref="productForm" :model="item" :rules="rules">
              <div class="detail-title">
                <span>基础信息</span>
                <i class="el-icon-delete" @click="delPart('productForm',index)"></i>
              </div>
              <div class="table">
                <div class="table-at">
                  <div>特产类型</div>
                  <div>特产名称</div>
                  <div>生产厂家</div>
                  <div>价格</div>
                  <div>联系人</div>
                  <div>联系电话</div>
                </div>
                <div class="table-no">
                  <div>
                    <el-form-item label="" prop="classifyName">
                      <el-select v-model="item.classifyName" placeholder="请选择特产类型" style="width: 100%;">
                        <el-option v-for="item in productTypeList" :key="item.classifyId" :label="item.classifyName"
                          :value="item.classifyId" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="goodsName">
                      <el-input v-model="item.goodsName" placeholder="请输入特产名称"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="manufacturer">
                      <el-input v-model="item.manufacturer" placeholder="请输入生产厂家"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="price">
                      <el-input v-model="item.price" placeholder="请输入价格"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactNumber">
                      <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="table-at">
                  <div style="flex:1;text-align:center;">地址</div>
                </div>
                <div class="table-no">
                  <div style="flex:1;text-align:center;">
                    <el-form-item label="" prop="address">
                      <!-- <el-cascader ref="villageCascader" v-model="item.address" :props="villageProp"
                        style="width: 100%;" placeholder="请选择地址" /> -->
                      <el-input v-model="item.address" placeholder="请输入地址"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="detail-title">土特产简介</div>
              <el-form-item label="" prop="introduce">
                <el-input type="textarea" v-model="item.introduce" placeholder="请输入场所简介" :rows="5"></el-input>
              </el-form-item>
              <el-form-item label="" prop="goodsImage">
                <div class="detail-title">上传图片</div>
                <imageUploadMax :value="item.goodsImage" :index="index" @uploadImage="goodsUploadImg" :limit="9" />
              </el-form-item>
            </el-form>
          </div>
          <div style="background:#FFFFFF;" class="add-line"
            @click="productClick(productForm.length === (index + 1) ? 'add' : 'delete')">
            {{ productForm.length === (index + 1) ? '+' : '-' }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="特色民宿" name="five">
        <div v-for="(item, index) in homeStayForm" :key="index">
          <div class="ms">
            <el-form ref="homeStayForm" :model="item" :rules="rules">
              <div class="detail-title">
                <span>基础信息</span>
                <i class="el-icon-delete" @click="delPart('homeStayForm',index)"></i>
              </div>
              <div class="table">
                <div class="table-at">
                  <div>民宿名称</div>
                  <div>联系人</div>
                  <div>联系电话</div>
                  <div style="flex:1;text-align:center;">地址</div>
                </div>
                <div class="table-no">
                  <div>
                    <el-form-item label="" prop="name">
                      <el-input v-model="item.name" placeholder="请输入民宿名称"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactNumber">
                      <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </div>
                  <div style="flex:1;text-align:center;">
                    <el-form-item label="" prop="address">
                      <!-- <el-cascader ref="villageCascader" v-model="item.address" :props="villageProp"
                        style="width: 100%;" placeholder="请选择地址" /> -->
                      <el-input v-model="item.address" placeholder="请输入地址"></el-input>
                    </el-form-item>
                  </div>

                </div>
              </div>
              <div class="detail-title">场所简介</div>
              <el-form-item label="" prop="address">
                <el-input type="textarea" v-model="item.intro" placeholder="请输入场所简介" :rows="5"></el-input>
              </el-form-item>
              <div class="detail-title">房间类型</div>
              <el-form-item label="" prop="hostelRooms">
                <el-table :data="item.hostelRooms">
                  <el-table-column label="类型" align="center" prop="name" width="200">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.roomType" placeholder="请选择类型" style="width: 100%;">
                        <el-option v-for="item in roomOptions" :key="item.dictValue" :label="item.dictLabel"
                          :value="item.dictValue" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="简介" align="center" prop="intro">
                    <template slot-scope="scope">
                      <el-form-item label="" prop="intro">
                        <el-input type="text" v-model="scope.row.intro" placeholder="请输入美食简介"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="图片" align="center" prop="imageUrl">
                    <template slot-scope="scope">
                      <el-form-item label="" prop="imageUrl">
                        <imageUploadMin :value="scope.row.imageUrl" :index="scope.$index" :fatherIndex="index"
                          @uploadImage="roomTypeUploadImg" :limit="5" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" prop="img" width="80">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" @click="roomTypeDeleteClick(scope, index)"
                        :disabled="item.hostelRooms.length<=1"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="add-line" @click="roomTypeClick(index)">+</div>
              </el-form-item>
              <el-form-item label="" prop="address">
                <div class="detail-title">上传图片</div>
                <imageUploadMax :value="item.imageUrl" :index="index" @uploadImage="roomUploadImg" :limit="9" />
              </el-form-item>
            </el-form>
          </div>
          <div style="background:#FFFFFF;" class="add-line"
            @click="roomClick(homeStayForm.length === (index + 1) ? 'add' : 'delete')">
            {{ homeStayForm.length === (index + 1) ? '+' : '-' }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button class="wan" :loading="buttonState" @click="submit">{{ buttonState ? '正在注册中...' : '完成' }}</el-button>
  </div>
</template>

<script>
  import Editor from "@/components/Editor";
  import ImageUpload from "@/components/UploadImage/index.vue";
  import imageUploadMin from "@/components/uploadImageMin/index.vue";
  import imageUploadMax from "@/components/uploadImageMax/index.vue";
  import { getMgyArea, listShopType, getVillageDetail, updateVillageDetail } from "@/api/login"
  export default {
    name: "app-container",
    components: {
      Editor,
      ImageUpload,
      imageUploadMin,
      imageUploadMax
    },
    data() {
      return {
        id: null,
        activeName: "first",
        foodList: [],
        loading: false,
        //完成按钮状态
        buttonState: false,
        //地址组件
        villageProp: {
          label: 'name',
          value: 'id',
          lazy: true,
          lazyLoad(node, resolve) {
            if (node.level == 5) {
              resolve([]);
            } else {
              getMgyArea({
                id: node.value || ''
              }).then(res => {
                resolve(res.data);
              })
            }
          }
        },
        //表单验证
        rules: {},
        //表单数据
        form: {},
        //村庄简介表单数据
        villageForm: {},
        //美食表单数据
        delicacyForm: [],
        //景点表单数据
        attractionsForm: [],
        //特产表单数据
        productForm: [],
        //民宿表单数据
        homeStayForm: [],
        //乡村级别字典
        villageGradeOptions: [],
        //景点类型字典
        landscapeClassifyOptions: [],
        //景点规模字典
        landscapeScaleOptions: [],
        //特产类型列表
        productTypeList: [],
        //房间类型字典
        roomOptions: [],
      };
    },
    created() {
      this.reset();
      this.getShopTypeList();
      this.getDicts("village_grade").then((response) => {
        this.villageGradeOptions = response.data;
      });
      this.getDicts("landscape_classify").then((response) => {
        this.landscapeClassifyOptions = response.data;
      });
      this.getDicts("landscape_scale").then((response) => {
        this.landscapeScaleOptions = response.data;
      });
      this.getDicts("room_type").then((response) => {
        this.roomOptions = response.data;
      });
      this.id = this.$route.query.id;
      this.getInfo()

    },
    mounted() {},
    methods: {
      getInfo() {
        getVillageDetail(this.id).then(res => {
          console.log(res)
          this.form = res.data;
        })
      },
      //重置表单数据
      reset() {
        this.form = {
          id: this.$route.query.id || "",
          village: {},
          hotelList: [],
          hostelList: [],
          appLandscapesIntroductions: [],
          goods: [],
        };
        this.villageForm = {
          villageGrade: "",
          contactPerson: "",
          contactNumber: "",
          year: "",
          deptName: "",
          userName: "",
          areaAddress: "",
          villageIntroduce: "",
          villageImage: "",
        };
        this.delicacyForm = [{
          name: "",
          businessHours: "",
          avgCost: "",
          contactPerson: "",
          contactNumber: "",
          address: "",
          intro: "",
          dishes: [{
            name: "",
            img: "",
            intro: "",
          }],
          img: "",
        }];

        this.attractionsForm = [{
          landscapeClassify: "",
          landscapesName: "",
          title: "",
          ticketPrice: "",
          visitTime: "",
          landscapeScale: "",
          contactPerson: "",
          contactNumber: "",
          address: "",
          landscapesIntroduction: "",
          image: "",
        }];

        this.productForm = [{
          classifyName: "",
          goodsName: "",
          manufacturer: "",
          price: "",
          contactPerson: "",
          contactNumber: "",
          address: "",
          introduce: "",
          goodsImage: ""
        }];
        this.homeStayForm = [{
          name: "",
          contactPerson: "",
          contactNumber: "",
          address: "",
          intro: "",
          hostelRooms: [{
            roomType: "",
            imageUrl: "",
            intro: ""
          }],
          imageUrl: ""
        }];
        this.resetForm("form");
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },

      /* 获取商品分类列表 */
      getShopTypeList() {
        listShopType().then(res => {
          this.productTypeList = res.data;
        });
      },

      //乡村简介图片上传组件回调
      villageUploadImg(e) {
        this.villageForm.villageImage = e;
      },

      //美食图片上传组件成功回调
      msDelicacyUploadImg(e) {
        this.delicacyForm[e.fatherIndex].dishes[e.index].img = e.value;
      },

      //特色美食图片上传组件回调
      delicacyUploadImg(e) {
        this.delicacyForm[e.index].img = e.value;
      },
      //景点图片上传组件回调
      landsUploadImg(e) {
        this.attractionsForm[e.index].image = e.value;
      },
      /* 景点form表单 landsClick添加add */
      landsClick(flag, index) {
        if (flag === "add") {
          const obj = {
            landscapeClassify: "",
            landscapesName: "",
            title: "",
            ticketPrice: "",
            visitTime: "",
            landscapeScale: "",
            contactPerson: "",
            contactNumber: "",
            address: "",
            landscapesIntroduction: "",
            image: "",
          };
          this.attractionsForm.push(obj);

        } else {
          this.attractionsForm.splice(index, 1);
        };
      },
      //特产上传图片组件回调
      goodsUploadImg(e) {
        this.productForm[e.index].goodsImage = e.value;
      },

      /* 特产添加表单按钮点击事件 */
      productClick(flag, index) {
        if (flag === "add") {
          const obj = {
            classifyName: "",
            goodsName: "",
            manufacturer: "",
            price: "",
            contactPerson: "",
            contactNumber: "",
            address: "",
            introduce: "",
            goodsImage: ""
          };
          this.productForm.push(obj);

        } else {
          this.productForm.splice(index, 1);
        };
      },
      /* 推荐美食table表单删除按钮 */
      foodDeleteClick(row, index) {
        this.delicacyForm[index].dishes.splice(row.$index, 1);
      },
      /* 推荐美食form表单add按钮点击事件 */
      delicacyOptionClick(flag, index) {
        if (flag === "add") {
          const obj = {
            name: "",
            businessHours: "",
            avgCost: "",
            contactPerson: "",
            contactNumber: "",
            address: "",
            intro: "",
            dishes: [{
              name: "",
              img: "",
              intro: "",
            }],
            img: "",
          };
          this.delicacyForm.push(obj);

        } else {
          this.delicacyForm.splice(index, 1);
        };
      },

      /* 推荐美食添加按钮点击事件 */
      foodClick(index) {
        const obj = {
          name: "",
          img: "",
          intro: "",
        };
        this.delicacyForm[index].dishes.push(obj);
      },


      // 特色民宿图片上传组件
      roomUploadImg(e) {
        this.homeStayForm[e.index].imageUrl = e.value;
      },

      //特色民宿类型图片上传组件回调
      roomTypeUploadImg(e) {
        this.homeStayForm[e.fatherIndex].hostelRooms[e.index].imageUrl = e.value;
      },

      /* 特色民宿类型表单删除按钮点击事件 */
      roomTypeDeleteClick(row, index) {
        this.homeStayForm[index].hostelRooms.splice(row.$index, 1);
      },

      /* 特色民宿类型添加按钮点击事件 */
      roomTypeClick(index) {
        const obj = {
          roomType: "",
          imageUrl: "",
          intro: ""
        };
        this.homeStayForm[index].hostelRooms.push(obj);
      },

      /* 特色民宿form表单add按钮点击事件 */
      roomClick(flag, index) {
        if (flag === "add") {
          const obj = {
            name: "",
            contactPerson: "",
            contactNumber: "",
            address: "",
            intro: "",
            hostelRooms: [{
              roomType: "",
              imageUrl: "",
              intro: ""
            }],
            imageUrl: ""
          };
          this.homeStayForm.push(obj);

        } else {
          this.homeStayForm.splice(index, 1);
        };
      },
      delPart(form, i) {
        this[form].splice(i, 1)
      },
      /* 提交按钮事件 */
      submit() {
        console.log(this.delicacyForm, 'ssss');

        // this.$refs["form"].validate(valid => {
        //     if (valid) {

        //     };
        // });
      },
    },
  };
</script>

<style lang="scss" scoped>
  #app-container {
    // height: calc(100vh - 84px);
    padding: 0 0 20px 0;
    overflow-y: auto;
    background: #F1F2F4;

    ::v-deep .el-tabs {
      margin: 10px 0;
      position: relative;

      .el-tabs__nav-scroll {
        padding: 10px 0;
        background: #ffffff;
        border: none;
        box-shadow: 0;
      }

      .el-tabs__nav {
        margin: 0 20px;
      }

      .el-tabs__content {
        margin: 0 20px;

        // background: #ffffff;

        border-radius: 5px;

        .ms {
          padding: 10px 20px;
          background: #ffffff;
        }
      }

      .table {
        width: 100%;
        // height: 200px;
        border-left: 1px solid #E8E8E9;
        border-right: 1px solid #E8E8E9;
        border-bottom: 1px solid #f2f2f2;

        .table-at {
          width: 100%;
          height: 50px;
          background: #F1F2F4;
          display: flex;

          div {
            border-left: 1px solid #E8E8E9;
            border-right: 1px solid #E8E8E9;
            width: 16.7%;
            font-size: 16px;
            color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .table-no {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;


          div {
            width: 16.7%;
            height: 100%;
            text-align: center;
            font-size: 16px;
            color: #000000;


            .el-form-item {
              width: 100%;
              height: 100%;
              margin: 0;

              .el-form-item__content {
                width: 100%;
                height: 100%;

                .el-input {
                  width: 100%;
                  height: 100%;

                  .el-input__inner {
                    width: 100%;
                    height: 100%;
                    // border: none;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 0;
                  }
                }
              }

            }

          }
        }
      }
    }

    .wan {
      position: absolute;
      right: 20px;
      top: 20px;
      border-radius: 10px;
    }

    .detail-title {
      margin: 20px 0;
      display: flex;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: bold;
        flex: 1;
      }

      i {
        font-size: 20px;
        color: #f00;
        cursor: pointer;
      }
    }

    .add-line {
      width: 100px;
      height: 25px;
      margin: 0 auto 20px;
      cursor: pointer;
      font-size: 25px;
      color: #646464;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F1F2F4;
    }

  }
</style>